import { SearchPanel } from "./SearchPanel";
import { List } from "screens/projectList/List";
import { useDebounce } from "hooks/useDebounce";
import { useProjects } from "hooks/useProjects";
import { useUsers } from "hooks/useUsers";
import { useDocumentTitle } from "../../hooks/useDocumentTitle";
import { Row } from "../../components/lib";
import { ButtonProjectCreation } from "../../components/ButtonProjectCreation";
import { ErrorBox } from "../../components/ErrorBox";
import { useProjectsSearchParams } from "./utils";
import { ScreenContainer } from "../../components/ScreenContainer";

const ProjectListScreen = () => {
  const [param, setParam] = useProjectsSearchParams();
  const debouncedParam = useDebounce(param, 200);
  const { data: list, isLoading, error } = useProjects(debouncedParam || {});
  const { data: users } = useUsers();
  useDocumentTitle("项目列表", false);

  return (
    <ScreenContainer>
      <Row between={true} marginBottom={1.6}>
        <h1>项目列表</h1>
        <ButtonProjectCreation />
      </Row>

      <SearchPanel param={param} setParam={setParam} />
      <ErrorBox error={error} />
      <List users={users || []} dataSource={list || []} loading={isLoading} />
    </ScreenContainer>
  );
};

export default ProjectListScreen;
